<template>
  <div>
    <el-dialog
      v-dialogDrag
      :title="$t('useradd.adduser')"
      :visible.sync="dialogFormVisible"
      width="30%"
      @close="closereg"
    >
      <el-tabs
        v-model="activeTab"
        type="border-card"
        style="height: 370px; overflow: auto"
      >
        <el-tab-pane name="tab1" label="用户信息">
          <el-form
            ref="useradd"
            :model="useradd"
            :rules="rules"
            label-width="25%"
          >
            <el-form-item :label="$t('useradd.username')" prop="username">
              <el-input
                v-model="useradd.username"
                autocomplete="off"
              />
            </el-form-item>
            <el-form-item :label="$t('useradd.password')" prop="password">
              <el-input v-model="useradd.password" />
            </el-form-item>
            <el-form-item
              :label="$t('useradd.emailaddress')"
              prop="emailaddress"
            >
              <el-input v-model="useradd.emailaddress" />
            </el-form-item>
            <el-form-item :label="$t('useradd.phone')" prop="phone">
              <el-input v-model="useradd.phone" />
            </el-form-item>
            <el-form-item label="角色" prop="roleids">
              <el-select v-model="useradd.roleids" style="width:100%" multiple placeholder="请选择">
                <el-option
                  v-for="item in roledata"
                  :key="item.id"
                  :label="item.rolename"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane name="tab2" label="用户权限">
          <el-tree
            ref="treemenu"
            node-key="id"
            show-checkbox
            :data="treedata"
            :props="defaultProps"
            default-expand-all
          />
        </el-tab-pane>
      </el-tabs>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="onSubmite('useradd')">{{
          $t("useradd.confirm")
        }}</el-button>
        <el-button size="mini" @click="dialogFormVisible = false">{{
          $t("useradd.cancel")
        }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { createuser } from '@/api/user'
import { getallrole } from '@/api/role'
import { getTreepermissions } from '@/api/permissions'
export default {
  name: 'Useradd',
  data() {
    return {
      rules: {
        username: [{ required: true, message: 'Cannot be empty' }],
        password: [
          {
            required: true,
            min: 6,
            message: 'Cannot be empty and has at least six digits'
          }
        ],
        emailaddress: [
          { required: true, message: 'Cannot be empty' },
          {
            type: 'email',
            message: 'Please enter the correct email address',
            trigger: ['blur', 'change']
          }
        ]
      },
      dialogFormVisible: false,
      useradd: {
        username: '',
        password: '',
        emailaddress: '',
        phone: '',
        permissionsids: [],
        roleids: []
      },
      treedata: [],
      defaultProps: {
        children: 'children',
        label: 'permissionsname'
      },
      activeTab: 'tab1',
      roledata: []
    }
  },
  methods: {
    async getTreepermissions() {
      var { data } = await getTreepermissions()
      this.treedata = data
    },
    async getallrole() {
      var { data } = await getallrole()
      this.roledata = data
    },
    handlenodecheck() {
      this.useradd.permissionsids = this.$refs.treemenu.getCheckedKeys()
      // .concat(this.$refs.treemenu.getHalfCheckedKeys());
    },
    async onshow() {
      this.dialogFormVisible = true
      await this.getTreepermissions()
      await this.getallrole()
    },
    closereg() {
      this.dialogFormVisible = false
      this.clear()
    },
    clear() {
      this.$refs['useradd'].resetFields()
      this.activeTab = 'tab1'
      this.useradd = {
        username: '',
        password: '',
        emailaddress: '',
        phone: '',
        permissionsids: [],
        roleids: []
      }
    },
    onSubmite(formData) {
      this.$refs[formData].validate(async(valid) => {
        if (valid) {
          this.handlenodecheck()

          var res = await createuser(this.useradd)
          if (res.code === 200) {
            this.$emit('callAdd')
            this.$message({
              message: 'Success',
              type: 'success'
            })
            this.dialogFormVisible = false
          }
        }
      })
    }
  }
}
</script>
<style  scoped>

</style>
